/**
* @Description: WoShop商城
* @Author: Paker
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<!-- 我的评价 -->
<template>
  <view class="page">
    <!--关注列表 -->
    <view class="nullBox" v-if="commentList.length==0">
      <image :src="$StaticUrl+'images/nullStatus/noList.png'"  mode="widthFix"></image>
      <view>暂无评价</view>
    </view>
    <view class="comment-item" v-for="(comment,index) in commentList" :key="index">
      
      <view class="goodsNum">订单编号:{{comment.ordernuber}}</view>
      
      <view class="goodsBox">
        <image :src="comment.goods.thumb_url" class="goodsAvatar"></image>
        <view class="goodsInfo">
          <div class="goodsName">{{comment.goods.goods_name}}</div>
          <view class="giveCount">评分:<uniRate :value="comment.star" disabled="true"></uniRate>
          </view>
        </view>
      </view>
      <view class="goodsWords">
        {{comment.describe}}
      </view>
      <view class="imageWrap">
        <image @click="preview(comment.imgurl,imgItem)" class="scoll-items" v-for="(imgItem,index2) in comment.imgurl" :key="index2"
               :src="imgItem" />
      
      </view>
      <view @click="deleteOrder(comment.id)" class="delBtn">
        <image :src="delSrc" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script>
import uniRate from '../../components/uni-rate/uni-rate.vue';

export default {
  components: {
    uniRate,
  },
  data() {
    return {
      
      commentList: [],
      delSrc: ''
    }
  },
  onLoad() {
    this.getmyApraiseList();
    uni.$emit('getmyApraiseList', {
      newActive3: false
    })
  },
  onPullDownRefresh() {
    this.getmyApraiseList();
    
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    
    getmyApraiseList() {
      this.$http.getmyApraiseList().then((res) => {
        if (res.status === 200) {
          this.commentList = res.data.data;
          
        }
      })
    },
    deleteOrder(index) {
      this.$showModal({
        content: "确认删除该评价？"
      }).then(res => {
        if (res.confirm) {
          this.$loading();
          this.$http.getdeleteApraise({
            id: index
          }).then(res => {
            if (res.status == 200) {
              this.commentList = '';
              this.$loading;
              this.getmyApraiseList();
            }
          });
        }
      });
    },
    close(index1, index2) {
      uni.showModal({
        content: '是否删除本条信息？',
        success: (res) => {
          if (res.confirm) {
            this.newsList[index1].data.splice(index2, 1);
          }
        }
      })
    },
    preview: function(urls, urlsId) {
      uni.previewImage({
        current: urlsId, //当前显示的 图片
        indicator: "number",
        urls: urls // 预览图片的列表
      });
    }
  }
};
</script>

<style lang="less">
@import "../../static/css/minmix.less";
@import "../../static/css/common.less";

page {
  background: #f4f4f4;
}

.page {
  .nullBox {
    .flex(@justify: center, @direction: column);
    color: #999999;
    align-items: center;
    
    image {
      width: 180upx;
      margin: 60upx 0;
    }
  }
  
  .comment-item {
    position: relative;
    .panel();
    
    .goodsNum {
      color: #999999;
    }
    
    .goodsBox {
      padding: 18upx 0;
      .flex(@wrap: nowrap, @justify: start);
      
      .goodsAvatar {
        width: 172upx;
        height: 172upx;
        border-radius: 14upx;
        flex-basis: 172upx;
      }
      
      .goodsInfo {
        padding-left: 14upx;
        
        .goodsName {
          margin-top: 10upx;
          margin-bottom: 10upx;
          font-weight: 500;
          font-size: 32upx;
        }
        
        .giveCount {
          display: flex;
        }
      }
    }
    
    .goodsWords {
      word-break: break-word;
    }
    
    .imageWrap {
      .flex(@justify: start);
      margin-top: 20upx;
      
      image {
        width: 120upx;
        height: 120upx;
        border-radius: 8upx;
        margin-right: 14upx;
      }
    }
    
    .delBtn {
      position: absolute;
      top: 30upx;
      right: 30upx;
      width: 48upx;
      height: 48upx;
      
      image {
        width: 48upx;
        height: 48upx;
      }
    }
  }
}
</style>
